<template>
  <div class="produce-report" v-if="flagMax">
    <ContentWrap>
      <HeaderTitle :title="'报告产出管理'" :content="'报告模板管理，报告产出规则管理，报告设置功能。'" :isdivider="false" />
    </ContentWrap>

    <ContentWrap>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="模板管理" name="模板管理">
          <TemplateA></TemplateA>
        </el-tab-pane>
        <el-tab-pane label="规则管理" name="规则管理">
          <TemplateB @addCreate="getNewData" @newView="getnewView" @modifyCreate="getModifyCreate"></TemplateB>
        </el-tab-pane>
        <el-tab-pane label="报告设置" name="报告设置">
          <TemplateC></TemplateC>
        </el-tab-pane>
      </el-tabs>
    </ContentWrap>
  </div>
  <div class="produce-report" v-else>
    <addCreate v-if="states == 'addCreate'" @addcreate="getAddFlag"></addCreate>
    <newView v-if="states == 'newView'" :rows='rows' @newview="getViewFlag"></newView>
    <modifyCreate v-if="states == 'modifyCreate'" :rows='rows' @modifyCreate="getModifyFlag"></modifyCreate>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElFormItem, ElInput, ElButton } from 'element-plus'
import TemplateA from '@/views/produce/pages/TemplateA.vue'
import TemplateB from '@/views/produce/pages/TemplateB.vue'
import TemplateC from '@/views/produce/pages/TemplateC.vue'
import addCreate from '@/views/produce/addcreate/index.vue'
import newView from '@/views/produce/newview/index.vue'
import modifyCreate from '@/views/produce/modifycreate/index.vue'
const activeName = ref('模板管理')
const flagMax = ref(true)
const states = ref('')
const rows = ref('')
// 新增
const getNewData = (e) => {
  flagMax.value = e.viewflag
  states.value = e.state
  // newData.value = e.rowData
}
// 查看
const getnewView = (e) => {
  flagMax.value = e.viewflag
  states.value = e.state
  rows.value = e.rows
}
// 修改
const getModifyCreate = (e) => {
  flagMax.value = e.viewflag
  states.value = e.state
  rows.value = e.rows
}
const getAddFlag = (e) => {
  flagMax.value = e
}
const getViewFlag = (e) => {
  flagMax.value = e
}
const getModifyFlag = (e) => {
  flagMax.value = e
}
onMounted(() => {})
</script>

<style scoped lang="scss">
:deep(.demo-tabs) {
  /* 取消下划线 */
  .el-tabs__active-bar {
    display: none;
  }
  /* 可选：取消悬停时的下划线 */
  .el-tabs__nav-wrap::after {
    display: none;
  }
  .el-tabs__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 38px;
    border-radius: 32px;
    padding: 0px !important;
    margin-right: 8px;
    color: #666;
  }
  /* 设置选中标签页的颜色和背景色 */
  .el-tabs__item.is-active {
    color: #1664ff; /* 选中标签页的文字颜色 */
    background: rgba(53, 96, 246, 0.1); /* 选中标签页的背景颜色 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 38px;
    border-radius: 32px;
    padding: 0px !important;
    margin-right: 8px;
  }
  /* 使用::v-deep调整每一行的样式 */
  ::deep(.el-table) {
    .el-table__row {
      font-size: 16px;
      height: 40px;
      /* 设置每一行的高度 */
      line-height: 40px;
      /* 设置行内文本的垂直对齐 */
      color: #333333;
    }
  }
}
</style>
